import React, { useState } from 'react';
import './index.scss'
import { Draggable } from 'react-beautiful-dnd'

function App(props) {
    // 获取input数据
    const { data, index, editTodo } = props
    const { id, content } = data
    const [value, setValue] = useState(content)

    // 双向绑定逻辑
    function changeHandler(e) {
        const newVal = e.target.value
        setValue(newVal)
    }
    // 离开焦点进行修改
    function edit() {
        editTodo(id, value) // 传入id和value
    }

    return (
        <Draggable draggableId={id.toString()} index={index} key={id}>
            {(provided) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}>
                    <input
                        className='input-component'
                        type="text"
                        value={value}
                        placeholder='请输入todo..'
                        onInput={changeHandler}
                        onBlur={edit}
                    />
                </div>


            )}
        </Draggable>


    );
}

export default App;